<template>
  <div class="conatiner">
        <div style="width: 100%; height: 5%;padding-left:20px;padding-top:20px">
        <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
      </div>
    <monitor-list
      v-if="showMode == 'list'"
      v-on:switchDetail="switchToDetail"
    ></monitor-list>
    <monitor-detail
      v-if="showMode == 'detail'"
      v-on:switchList="switchToList"
    ></monitor-detail>
  </div>
</template>
<script>
import MonitorList from "./list";
import MonitorDetail from "./detail";
import { mapGetters } from 'vuex';
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
export default {
  data() {
    return {
      showMode: "list", // 默认显示List界面
      naviItems: [{ text: "起重机械" }, { text: "数据仓储" },{text:'监测数据'}],
    };
  },
    computed:{
    ...mapGetters(['selectedEqu'])
  },
  created() {
    if(this.selectedEqu){
      console.log('找到了vuex中的数据selectedEqu');
      this.switchToDetail()
    }
  },
  methods: {
    // 在List界面点击xxx份
    switchToDetail() {
      this.showMode = "detail";
    },
    // 在detail界面点击返回上一级，回到List界面
    switchToList() {
      this.showMode = "list";
    },
  },
  components: {
    MonitorList,
    MonitorDetail,
    Breadcrumb
  },
};
</script>
<style lang="less" scoped>

</style>